<template>
  <a-form>
    <a-row :gutter="24" v-if="area == 'basic'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="姓名">
          <a-input v-model="queryParam.name" allowClear />
        </a-form-item>
      </a-col>

      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="地址">
          <a-input v-model="queryParam.address" allowClear />
        </a-form-item>
      </a-col>

      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="所属部门">
          <!-- <a-input v-model="queryParam.departmentID" allowClear /> -->
          <treeselect :show-count="true" :options="Dept" v-model="queryParam.departmentID" placeholder="请选择工作部门..." :normalizer="normalizer" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="area == 'visit'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="姓名">
          <a-input v-model="queryParam.name" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="走访方式 ">
          <!-- <a-input v-model="queryParam.personType" allowClear /> -->
          <a-select showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.visitType">
            <a-select-option v-for="item in visitTypeList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="走访时间">
          <!-- <a-input v-model="queryParam.startDateStart" allowClear /> -->
          <!-- <a-date-picker @change="startDateStartChange" /> -->
          <a-range-picker :ranges="{
              今天: [moment(), moment()],
              一周内: [moment(), moment().endOf('week')],
              一月内: [moment(), moment().endOf('month')],
              一年内: [moment(), moment().endOf('year')],
            }" style="width: 100%" format="YYYY-MM-DD" @change="startDateStartChange" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="有新住址">
          <a-checkbox  v-model="queryParam.IsHaveNewAddress" @change="onAddressChange">
            
          </a-checkbox>
          <!-- <a-radio-group v-model="queryParam.IsHaveNewAddress">
            <a-radio :value="true">
              有
            </a-radio>
            <a-radio :value="false">
              无
            </a-radio>
          </a-radio-group> -->
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="所属部门">
          <!-- <a-input v-model="queryParam.departmentID" allowClear /> -->
          <treeselect :show-count="true" :options="Dept" v-model="queryParam.departmentID" placeholder="请选择工作部门..." :normalizer="normalizer" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="area == 'help'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="救助类型 ">
          <!-- <a-input v-model="queryParam.personType" allowClear /> -->
          <a-select allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.helpType">
            <a-select-option v-for="item in helpTypeList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="救助时间">
          <!-- <a-input v-model="queryParam.startDateStart" allowClear /> -->
          <!-- <a-date-picker @change="endDateStartChange" /> -->
          <a-range-picker :ranges="{
              今天: [moment(), moment()],
              一周内: [moment(), moment().endOf('week')],
              一月内: [moment(), moment().endOf('month')],
              一年内: [moment(), moment().endOf('year')],
            }" style="width: 100%" format="YYYY-MM-DD" @change="helpDateStartChange" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="area == 'active'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="活动名称">
          <a-input v-model="queryParam.title" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="活动时间">
          <a-range-picker :ranges="{
              今天: [moment(), moment()],
              一周内: [moment(), moment().endOf('week')],
              一月内: [moment(), moment().endOf('month')],
              一年内: [moment(), moment().endOf('year')],
            }" style="width: 100%" format="YYYY-MM-DD" @change="activeDateStartChange" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="area == 'noti'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="通报类型 ">
          <!-- <a-input v-model="queryParam.personType" allowClear /> -->
          <a-select allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.visitType">
            <a-select-option v-for="item in notificationTypeList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="通报时间">
          <a-range-picker :ranges="{
              今天: [moment(), moment()],
              一周内: [moment(), moment().endOf('week')],
              一月内: [moment(), moment().endOf('month')],
              一年内: [moment(), moment().endOf('year')],
            }" style="width: 100%" format="YYYY-MM-DD" @change="notiDateStartChange" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="area == 'work'">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="标题">
          <a-input v-model="queryParam.title" allowClear />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :lg="24" :md="24" :sm="24">
        <a-form-item :style="{ float: 'right' }">
          <a-button type="primary" style="margin-left: 14px" @click="onSearch(queryParam)">查询</a-button>
          <a-button @click="add" style="margin-left: 14px" v-if="addType == 1">添加</a-button>
          <!-- <a-button v-if="displayf != 'choose'" style="margin-left: 14px;" @click="importExcel(queryParam)">导入</a-button> -->
          <!-- <a-button v-if="area == 'visit'" style="margin-left: 14px" @click="exportExcel(queryParam)">导出工程清单</a-button> -->
          <a-popconfirm @confirm="deleted" placement="left" title="确定删除?" okText="确定" cancelText="取消">
            <a-button type="danger" style="margin-left: 14px">删除</a-button>
          </a-popconfirm>
          <a-button v-if="displayf == 'choose'" style="margin-left: 14px" @click="enSure()">确定</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import "@/views/treeselect1.css";
import { deleteChildrenIfNull2 } from "@/utils/util";
import { authDevice } from "@/utils/mixin";
import { personList, visitType } from "@/utils/device";
import moment from "moment";
import Treeselect from '@riophae/vue-treeselect'

import { getDicList, getDicDropList } from "@/api/dict";

import { mapActions, mapGetters } from "vuex";
import { getDepartmentList } from "@/api/department";
import { deleteChildrenIfNull } from '@/utils/util'

const userInfo = Vue.ls.get(ACCESS_TOKEN);
export default {
  name: "SearchFom",
  mixins: [authDevice],
  components: { Treeselect },
  props: {
    area: {
      type: String,
      required: false,
    },
    displayf: {
      type: String,
      required: false,
    },
    dataObj: {
      type: Object,
      required: false,
    },
    addType: {
      type: Number,
      default: 1,
    },
  },
  data () {
    return {
      a: process.env.VUE_APP_API_BASE_URL + "/api/students/ImportExcel",
      normalizer (node) {
        return {
          id: node.ID,
          label: node.Title,
          children: node.Childrens,
        };
      },
      fileList: [],
      userInfo,
      more: true,
      open: false,
      personList: personList,
      visitTypeList: visitType,
      helpTypeList: [],
      notificationTypeList: [],
      queryParam: {
        name: undefined,
        address: undefined,
        visitDateStart: undefined,
        visitDateEnd: undefined,
        visitType: undefined,
        helpType: undefined,
        applicationTimeStart: undefined,
        applicationTimeEnd: undefined,
        title: undefined,
        activityTimeStart: undefined,
        activityTimeEnd: undefined,
        visitType: undefined,
        notificationTimeStart: undefined,
        notificationTimeEnd: undefined,
        departmentID: undefined,
        IsHaveNewAddress: undefined
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
      },
      normalizer (node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      tipContext: "",
      departmentOptions: [], // 部门列表
      isDepartment: false, // 是否含有部门
      projectTypeOptions: [],
      Dept: []
    };
  },
  watch: {
    queryParam () {
      this.onSearch(this.queryParam);
    },
  },
  computed: {},
  created () {
    getDicDropList({ CategoryId: 2076 }).then((res) => {
      this.helpTypeList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2077 }).then((res) => {
      this.notificationTypeList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDepartmentList().then(res => {
      this.Dept = res.children
      this.removeChildrenIfNUll(this.Dept)
    })
  },
  async mounted () { },
  computed: {},
  methods: {
    moment,
    toggle () {
      this.more = !this.more;
    },
    startDateStartChange (dates, dateStrings) {
      this.queryParam.visitDateStart =
        dateStrings && dateStrings.length > 0 ? dateStrings[0] : undefined;
      this.queryParam.visitDateEnd =
        dateStrings && dateStrings.length > 0 ? dateStrings[1] : undefined;
    },
    helpDateStartChange (dates, dateStrings) {
      this.queryParam.applicationTimeStart =
        dateStrings && dateStrings.length > 0 ? dateStrings[0] : undefined;
      this.queryParam.applicationTimeEnd =
        dateStrings && dateStrings.length > 0 ? dateStrings[1] : undefined;
    },
    activeDateStartChange (dates, dateStrings) {
      this.queryParam.activityTimeStart =
        dateStrings && dateStrings.length > 0 ? dateStrings[0] : undefined;
      this.queryParam.activityTimeEnd =
        dateStrings && dateStrings.length > 0 ? dateStrings[1] : undefined;
    },
    notiDateStartChange (dates, dateStrings) {
      this.queryParam.notificationTimeStart =
        dateStrings && dateStrings.length > 0 ? dateStrings[0] : undefined;
      this.queryParam.notificationTimeEnd =
        dateStrings && dateStrings.length > 0 ? dateStrings[1] : undefined;
    },

    removeChildrenIfNUll (data) {
      data.map(a => {
        if (a && a.children.length > 0) {
          this.removeChildrenIfNUll(a.children)
        } else {
          deleteChildrenIfNull(a)
        }
      })
    },

    onAddressChange({target}){
      // console.log(val)
      this.queryParam.IsHaveNewAddress = target.checked
    },

    handleChange (val, option) {
      console.log(val);
      if (val.length > 1) {
        this.queryParam.departmentID = val[1];
      } else {
        this.queryParam.departmentID = val[0];
      }
    },
    handleTypeChange (val, option) {
      if (val.length > 1) {
        this.queryParam.ProjectTypeID = val[1];
      } else {
        this.queryParam.ProjectTypeID = val[0];
      }
      // this.queryParam.ProjectTypeID = val
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    handleCheckProject (v) {
      this.queryParam.IsShowOther = v;
    },
    handleCheckChange (val, option, key) {
      switch (key) {
        case "IsNeedCheck":
          this.queryParam.IsNeedCheck = val;
          break;
        case "IsNasCheck":
          this.queryParam.IsNasCheck = val;
          break;
        default:
          break;
      }
    },
    deleted () {
      this.$emit("handleDel");
    },
    add () {
      this.$emit("handleAdd");
    },
    enSure () {
      this.$emit("handleEnSure");
    },
    onSearch (data) {
      const objData = { ...data };
      this.$emit("search", objData);
    },
    exportExcel (data) {
      const objData = { ...data };
      this.$emit("exportXls", objData);
    },
  },
};
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
